<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>一农</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="assets/mui/css/mui.min.css" />
    <link rel="stylesheet" href="assets/font/iconfont.css" />
    <link rel="stylesheet" href="css/base.css" />
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/artTemplate/template-native.js"></script>
    <script src="js/public.js"></script>
    <style>
      .expert-outer {
        padding: 10px;
      }
      .expert-inner {
        padding: 20px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
      }
      .avatar {
        width: 50px;
        height: 62px;
        border-radius: 6px;
        border: 1px solid #ccc;
      }
      .expert-top {
        border-bottom: 1px solid #ccc;
        display: flex;
        padding-bottom: 8px;
      }
      .expert-bot {
        margin-top: 12px;
        display: flex;
        justify-content: space-between;
        color: #59c38b;
      }

      .expert-top-l {
        width: 50px;
        margin-right: 18px;
      }

      .expert-top-m {
        display: flex;
        flex-direction: column;
        flex: 1;
      }
      .expert-top-r {
        width: 70px;
        font-size: 15px;
      }

      .expert-top-m-m {
        margin-top: 8px;
      }

      .expert-top-m-b {
        margin-top: 8px;
        font-size: 15px;
      }
      .expert-bot-l {
        flex: 1;
        text-align: center;
        border-right: 2px solid #ccc;
      }
      .expert-bot-r {
        flex: 1;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav my-header">
      <a class="mui-icon mui-icon-back mui-pull-left" href="login.html"></a>
      <h1 class="mui-title">专家服务</h1>
      <a class="mui-icon mui-icon-chat mui-pull-right" href="message.html"></a>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
      <a class="mui-tab-item" href="index.html">
        <span class="mui-icon iconfont icon-fuwuzhongjiewuye my-icon"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="manage.html">
        <span class="mui-icon iconfont icon-shengchangzhouqi my-icon"></span>
        <span class="mui-tab-label">数据</span>
      </a>
      <a class="mui-tab-item" href="equipment.html">
        <span class="mui-icon iconfont icon-shebei my-icon"></span>
        <span class="mui-tab-label">服务</span>
      </a>
      <a class="mui-tab-item mui-active" href="login.html">
        <span class="mui-icon iconfont icon-wode my-icon"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
    <div class="mui-content">
      <div class="expert-outer">
        <div class="expert-inner">
          <div class="expert-top">
            <div class="expert-top-l">
              <img src="./images/expert11.jpg" alt="" class="avatar" />
            </div>
            <div class="expert-top-m">
              <div class="expert-top-m-t">许博士</div>
              <div class="expert-top-m-m">
                <img
                  src="./images/like1.png"
                  alt=""
                  style="width: 15px; height: 15px;"
                />
                105&nbsp;
                <img
                  src="./images/sms.png"
                  alt=""
                  style="width: 15px; height: 15px;"
                />
                3&nbsp;
                <img
                  src="./images/smile.png"
                  alt=""
                  style="width: 15px; height: 15px;"
                />
                10&nbsp;
              </div>
              <div class="expert-top-m-b">
                擅长作物: 大豆/烟叶 <br />
                服务区域: 河北省
              </div>
            </div>
            <div class="expert-top-r">
              <img
                src="./images/online.png"
                alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"
              />
              在线
            </div>
          </div>
          <div class="expert-bot">
            <div class="expert-bot-l">
              <img
                src="./images/ask.png"
                alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"
              />
              提问留言
            </div>
            <div class="expert-bot-r">
              <img
                src="./images/tele.png"
                alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"
              />
              电话联系
            </div>
          </div>
        </div>
      </div>

      <div class="expert-outer">
        <div class="expert-inner">
          <div class="expert-top">
            <div class="expert-top-l">
              <img src="./images/expert22.jpg" alt="" class="avatar" />
            </div>
            <div class="expert-top-m">
              <div class="expert-top-m-t">韦声</div>
              <div class="expert-top-m-m">
                <img
                  src="./images/like1.png"
                  alt=""
                  style="width: 15px; height: 15px;"
                />
                85&nbsp;
                <img
                  src="./images/sms.png"
                  alt=""
                  style="width: 15px; height: 15px;"
                />
                1&nbsp;
                <img
                  src="./images/smile.png"
                  alt=""
                  style="width: 15px; height: 15px;"
                />
                1&nbsp;
              </div>
              <div class="expert-top-m-b">
                擅长作物: 柑橘/苹果 <br />
                服务区域: 云南省
              </div>
            </div>
            <div class="expert-top-r">
              <img
                src="./images/online.png"
                alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"
              />
              在线
            </div>
          </div>
          <div class="expert-bot">
            <div class="expert-bot-l">
              <img
                src="./images/ask.png"
                alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"
              />
              提问留言
            </div>
            <div class="expert-bot-r">
              <img
                src="./images/tele.png"
                alt=""
                style="width: 20px; height: 20px; vertical-align: middle;"
              />
              电话联系
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
